<script setup>
const course_total_num = 11474;
const course_newly_num = 238;
const total_view_time = 2054300;
const user_num = 45271;
const teacher_num = 10540;
const student_num = 34731;
const income_total = "2.1亿";
const income_newly = 21026;
const income_change_rate = "14%";
</script>

<template>
  <div class="header_statistics_item">
    <div class="header_title">
      <h1>平台管理</h1>
    </div>
    <div class="header_total_statistic">
      <div class="space_between_title_statistic"></div>
      <div class="header_total_statistic_foreach">
        <h1>| 课程总数: {{ course_total_num }}</h1>
        <li>新增课程：{{ course_newly_num }}</li>
        <li>观看时长: {{ total_view_time }}h</li>
      </div>
      <div class="header_total_statistic_foreach">
        <h1>| 用户总量: {{ user_num }}</h1>
        <li>老师数量：{{ teacher_num }}</li>
        <li>学生数量: {{ student_num }}</li>
      </div>
      <div class="header_total_statistic_foreach">
        <h1>| 平台收入: {{ income_total }}</h1>
        <li>新增收入：{{ income_newly }}</li>
        <li>收入增速: {{ income_change_rate }}</li>
      </div>
    </div>
  </div>
  <el-divider />
</template>

<style scoped>
.header_statistics_item {
  display: inline-flex;
  width: 100%;
}

.header_statistics_item h1 {
  margin-top: 1.5%;
}

.header_title {
  display: inline-flex;
  color: black;
  margin: 0px;
  width: 20%;
  margin-left: 2%;
  margin-right: 3%;
}

.header_total_statistic {
  display: inline-flex;
  color: black;
}

.header_total_statistic_foreach {
  display: inline-flex;
  flex-wrap: wrap;
  border: 2px;
  border-radius: 10px;
  width: 25%;
  height: 130px;
  margin-left: 3%;
  margin-right: 5%;
  background-color: rgb(0, 0, 0, 0.05);
}

.header_total_statistic_foreach h1 {
  margin: 0px;
  margin-bottom: 15px;
  border-radius: 10px 10px 0 0;
  width: 100%;
}

.header_total_statistic_foreach li {
  font-size: 20px;
  padding-bottom: 5px;
}
</style>
